<script>
export default {
  name: "Index",
  methods: {
    //跳转页面的方法
    toPage1() {
      this.$router.push({path: '/page1', query: {username: '李四'}})
    },
    toPage2() {
      this.$router.push({path: '/page2', query: {age: 20}})
    }
  }
}
</script>

<template>
  <div>
    <!--    超链接跳转到page1-->
    <router-link to="/page1?username=zhangsan">跳转到页面1</router-link>
    <br>
    <!--    通过代码做跳转-->
    <button @click="toPage1()">跳转到页面1</button>
    <br>
    <!--    超链接跳转到page1-->
    <router-link to="/page2?age=12">跳转到页面2</router-link>
    <br>
    <!--    通过代码做跳转-->
    <button @click="toPage2()">跳转到页面2</button>
  </div>
  <div>
    <router-view/>
  </div>
</template>

<style>
div {
  float: left;
}
</style>